<script setup>
import { nextTick, ref } from "vue";
import { useRouter } from "vue-router";
import { staffList } from "@/utils/constClass.js";
import { ElMessage } from "element-plus";
import { queryRoleList, changeRoleStatus, deleteRole } from "@/api/System";
const tableLoading = ref(false);
const seachTableRef = ref();
const messageBoxRef = ref();
const router = useRouter();
const instance = getCurrentInstance();
const formInline = ref([
  {
    type: "input",
    prop: "roleName",
    placeholder: "角色名称",
    label: "",
    model: "",
  },
  {
    type: "select",
    placeholder: "状态",
    label: "",
    width: "180px",
    prop: "roleStatusList",
    data: staffList,
    multiple: true,
    model: [],
  },
]);
const btnLefts = ref([
  {
    label: "新增角色",
    plain: false,
    type: "primary",
    show: true,
    img: new URL("@/assets/icon/btn-add.png", import.meta.url),
    click: async () => {
      router.push({ name: "RoleManageAdd" });
    },
  },
]);
const tableConfig = ref([
  {
    prop: "roleName",
    label: "角色名称",
    width: "240",
  },
  {
    prop: "userCount",
    label: "员工",
    width: "80",
  },
  {
    prop: "roleStatus",
    label: "状态",
    type: "slot",
    width: "80",
    slotName: "roleStatus",
  },
  {
    prop: "roleRemark",
    label: "备注",
   
  },
  {
    prop: "lastUpdateTime",
    label: "最新更新",
    width: "250",
  },
  {
    type: "action",
    label: "操作",
    width: 240,
    btns: [
      {
        label: () => "详情",
        type: "primary",
        click: async (row) => {
          router.push({
            name: "RoleManageInfo",
            query: { uuid: row.id },
          });
        },
      },
      {
        label: () => "编辑",
        type: "success",
        show: (row) => {
          return !row.roleType;
        },
        click: async (row) => {
          router.push({
            name: "RoleManageEdit",
            query: { uuid: row.id },
          });
        },
      },
      {
        label: () => "删除",
        type: "danger",
        show: (row) => {
          return !row.roleType;
        },
        click: async (row) => {
          delMessageBoxRef.value.open();
          delItem.value = row;
        },
      },
    ],
  },
]);

const totalPage = ref(0);
const tableData = ref([]);

const handlerSearch = async (formInline) => {
  tableLoading.value = true;
  try {
    const { records, total } = await queryRoleList({...formInline,clientType: 0});
    totalPage.value = Number(total);
    tableData.value = records;
    tableLoading.value = false;
  } catch (e) {
    tableLoading.value = false;
  }
};
const switchLoading = ref(false);
const switchChange = async () => {
  nextTick(() => {
    if (activeItem.value.roleStatus) {
      messageBoxRef.value.open();
    } else {
      messageConfirm();
    }
  });
};
const messageConfirm = async () => {
  activeItem.value.switchLoading = true;
  try {
    // 拉取数据
    activeItem.value.switchLoading = false;
    await changeRoleStatus({
      roleId: activeItem.value.id,
      roleStatus: !activeItem.value.roleStatus,
    });
    seachTableRef.value.handlerSearch();
  } catch (error) {
    activeItem.value.switchLoading = false;
  }
};
const activeItem = ref();
const activeItemFun = (data) => {
  activeItem.value = data;
};
const delItem = ref();
const delMessageBoxRef = ref();
const delMessageConfirm = async () => {
  await deleteRole(delItem.value.id);
  ElMessage({
    showClose: true,
    message: "删除成功",
    type: "success",
  });
  seachTableRef.value.handlerSearch();
};

onActivated(() => {
  let closeTagName = sessionStorage.getItem("closeTagName");
  if (closeTagName == "RoleManageEdit") {
    //编辑退回时
    seachTableRef.value.handlerSearch(); //刷新当前页
  } else if (closeTagName == "RoleManageAdd") {
    //新增退回时
    seachTableRef.value.initSearch(); //返回第一页并刷新
  }
  instance.proxy.$forceUpdate(); //重新渲染demo
  sessionStorage.removeItem("closeTagName"); //溢出缓存中的tag名
});
</script>

<template>
  <div class="page-content">
    <SeachTable
      :tableType="1"
      ref="seachTableRef"
      :forms="formInline"
      :btnLefts="btnLefts"
      :tableLoading="tableLoading"
      :tableConfig="tableConfig"
      :tableData="tableData"
      :totalPage="totalPage"
      tableHeight="calc(100% - 202px)"
      @handlerSearch="handlerSearch"
    >
      <template #roleStatus="{ row }">
        <el-switch
          v-model="row.roleStatus"
          :loading="switchLoading"
          :disabled="!!row.roleType"
          :before-change="switchChange"
          @click="activeItemFun(row)"
        />
      </template>
    </SeachTable>
  </div>
  <MessageBox
    ref="messageBoxRef"
    :content="'禁用后，该角色将无法登录系统，确定禁用？'"
    @confirm="messageConfirm"
  />
  <MessageBox
    ref="delMessageBoxRef"
    :content="'确认删除该角色？'"
    :rightBtnTxt="'删除'"
    @confirm="delMessageConfirm"
  />
</template>

<style lang="less" scoped></style>
